<template>
  <div class="about-page">
    <!-- 页面头部 -->
    <el-page-header @back="goBack" content="关于我们" class="page-header" />

    <!-- 公司介绍 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <span>公司介绍</span>
        </div>
      </template>
      <div class="section-content">
        <p>
          爱坤租车成立于2010年，是一家专业的汽车租赁服务提供商。我们致力于为客户提供高品质、便捷的租车服务，业务范围覆盖全国主要城市。
        </p>
        <p>
          经过多年的发展，我们已经建立了完善的车辆管理体系和服务网络，拥有各类车辆数千台，服务客户超过百万。
        </p>
        <div class="stats">
          <el-row :gutter="20">
            <el-col :span="6" v-for="stat in stats" :key="stat.title">
              <div class="stat-item">
                <div class="stat-number">{{ stat.number }}</div>
                <div class="stat-title">{{ stat.title }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <!-- 企业文化 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <span>企业文化</span>
        </div>
      </template>
      <div class="section-content culture-section">
        <el-row :gutter="30">
          <el-col :span="8">
            <div class="culture-item">
              <el-icon class="culture-icon"><Medal /></el-icon>
              <h3>企业使命</h3>
              <p>让每一次出行都更加便捷舒适</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="culture-item">
              <el-icon class="culture-icon"><Star /></el-icon>
              <h3>核心价值观</h3>
              <p>客户至上、诚信为本、创新驱动、团队合作</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="culture-item">
              <el-icon class="culture-icon"><Trophy /></el-icon>
              <h3>企业愿景</h3>
              <p>成为最受信赖的汽车出行服务品牌</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 服务协议 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <span>服务协议</span>
        </div>
      </template>
      <div class="section-content">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="租车协议" name="1">
            <div>1. 用户在租车时需提供有效身份证件和驾驶证</div>
            <div>2. 租车期间车辆的保管责任由承租人承担</div>
            <div>3. 租车费用按日计算，不足一日按一日计费</div>
            <div>4. 超时归还车辆需支付额外费用</div>
            <div>5. 禁止将车辆转租、转借给他人使用</div>
          </el-collapse-item>
          <el-collapse-item title="保险条款" name="2">
            <div>1. 所有车辆均购买了基本保险</div>
            <div>2. 用户可选择购买额外保险以获得更高保障</div>
            <div>3. 发生事故时需及时报警并通知租车公司</div>
            <div>4. 保险理赔范围以外的损失由承租人承担</div>
          </el-collapse-item>
          <el-collapse-item title="违约责任" name="3">
            <div>1. 如用户违约，租车公司有权终止协议并收回车辆</div>
            <div>2. 因用户原因造成车辆损坏需承担维修费用</div>
            <div>3. 逾期未还车每天按租金的150%收取费用</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>

    <!-- 联系我们 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <span>联系我们</span>
        </div>
      </template>
      <div class="section-content contact-section">
        <el-row :gutter="30">
          <el-col :span="12">
            <h3>联系方式</h3>
            <ul class="contact-info">
              <li>
                <i class="el-icon-location"></i> 地址：北京市朝阳区某某大厦101室
              </li>
              <li><i class="el-icon-phone"></i> 电话：400-888-8888</li>
              <li><i class="el-icon-message"></i> 邮箱：service@aikun.com</li>
              <li>
                <i class="el-icon-time"></i> 服务时间：周一至周日 8:00-22:00
              </li>
            </ul>
          </el-col>
          <el-col :span="12">
            <h3>在线留言</h3>
            <el-form :model="messageForm" label-width="60px">
              <el-form-item label="姓名">
                <el-input
                  v-model="messageForm.name"
                  placeholder="请输入您的姓名"
                />
              </el-form-item>
              <el-form-item label="电话">
                <el-input
                  v-model="messageForm.phone"
                  placeholder="请输入您的电话"
                />
              </el-form-item>
              <el-form-item label="内容">
                <el-input
                  v-model="messageForm.content"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入留言内容"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitMessage"
                  >提交留言</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Medal, Star, Trophy } from "@element-plus/icons-vue";

const router = useRouter();

// 折叠面板默认展开项
const activeNames = ref(["1", "2", "3"]);

// 统计数据
const stats = ref([
  { number: "10000+", title: "服务客户" },
  { number: "5000+", title: "车辆资源" },
  { number: "100+", title: "服务城市" },
  { number: "14", title: "服务年限" },
]);

// 留言表单
const messageForm = reactive({
  name: "",
  phone: "",
  content: "",
});

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 提交留言
const submitMessage = () => {
  if (!messageForm.name || !messageForm.phone || !messageForm.content) {
    ElMessage.warning("请填写完整信息");
    return;
  }

  // 这里应该调用后端API提交留言
  ElMessage.success("留言提交成功，我们会尽快联系您");

  // 清空表单
  messageForm.name = "";
  messageForm.phone = "";
  messageForm.content = "";
};
</script>

<style scoped>
.about-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.section-content {
  line-height: 1.8;
}

.section-content p {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.stats {
  margin-top: 30px;
}

.stat-item {
  text-align: center;
  padding: 20px 0;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 16px;
  color: #999;
}

.culture-section {
  padding: 20px 0;
}

.culture-item {
  text-align: center;
  padding: 20px;
}

.culture-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 15px;
}

.culture-item h3 {
  margin-bottom: 10px;
  color: #333;
}

.culture-item p {
  color: #666;
  line-height: 1.6;
}

.contact-section {
  padding: 20px 0;
}

.contact-info {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 15px;
  font-size: 16px;
  color: #666;
}

.contact-info i {
  margin-right: 10px;
  color: #409eff;
}

@media (max-width: 768px) {
  .about-page {
    padding: 10px;
  }

  .stats .el-col {
    width: 50%;
    margin-bottom: 15px;
  }

  .culture-section .el-col {
    width: 100%;
    margin-bottom: 20px;
  }

  .contact-section .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
